<template>
  <div class="box">
    <header class="box-header">
      <div class="header-lbox">
        <h1>学习计划与统计</h1>
        <span class="bh-box">2024 年 1 月 15 日</span>
      </div>
      <div class="header-rbox">
        <button class="btn-left">
          <i class="fas fa-calendar-alt"></i>
          日历视图
        </button>
        <button class="btn-right">
          <i class="fas fa-plus"></i>
          自定义计划
        </button>
      </div>
    </header>
    <nav class="box-nav">
      <a href="#" class="a-left">今日统计</a>
      <a href="#" class="a-right">累计统计</a>
    </nav>
    <div class="box-content">
      <div class="body-box">
        <div class="body-box-header">
          <h3 class="body-box-title">词汇学习量</h3>
        </div>
        <div class="body-box-body">
          <div>
            <div class="body-box-text">
              <span>预习词汇</span>
              <span>目标: 100</span>
            </div>
            <div class="body-box-content">
              <span class="body-box-content-left-text">85</span>
              <div class="body-box-content-right-text">
                <div class="text-box" style="width: 85%"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="body-box-text">
              <span>复习词汇</span>
              <span>目标: 200</span>
            </div>
            <div class="body-box-content">
              <span class="body-box-content-left-text">165</span>
              <div class="body-box-content-right-text">
                <div class="text-box" style="width: 82.5%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="body-box">
        <div class="body-box-header">
          <h3 class="body-box-title">阅读学习量</h3>
        </div>
        <div class="body-box-body">
          <div>
            <div class="body-box-text">
              <span>今日阅读篇数</span>
              <span>目标: 5</span>
            </div>
            <div class="body-box-content">
              <span class="body-box-content-left-text">3</span>
              <div class="body-box-content-right-text">
                >
                <div class="text-box" style="width: 60%"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="body-box-text">
              <span>累计阅读量</span>
              <span>本周: 15/25</span>
            </div>
            <div class="body-box-content">
              <span class="body-box-content-left-text">15</span>
              <div class="body-box-content-right-text">
                <div class="text-box" style="width: 60%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="body-box">
        <div class="body-box-header">
          <h3 class="body-box-title">写作学习量</h3>
        </div>
        <div class="body-box-body">
          <div>
            <div class="body-box-text">
              <span>今日写作篇数</span>
              <span>目标: 2</span>
            </div>
            <div class="body-box-content">
              <span class="body-box-content-left-text">1</span>
              <div class="body-box-content-right-text">
                <div class="text-box" style="width: 50%"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="body-box-text">
              <span>写作总词数</span>
              <span>目标: 1000</span>
            </div>
            <div class="body-box-content">
              <span class="body-box-content-left-text">750</span>
              <div class="body-box-content-right-text">
                <div class="text-box" style="width: 75%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box-content">
      <div class="body-box">
        <h3 class="body-box-title">学习成就</h3>
        <div class="body-box-body-box">
          <div class="body-box-body-box-item">
            <div class="border">
              <i class="fas fa-fire text-primary text-xl"></i>
            </div>
            <div>
              <p class="border-top">连续打卡</p>
              <p class="border-bottom">28 天</p>
            </div>
          </div>
          <div class="body-box-body-box-item">
            <div class="border">
              <i class="fas fa-book text-primary text-xl"></i>
            </div>
            <div>
              <p class="border-top">掌握词数</p>
              <p class="border-bottom">2,580 个</p>
            </div>
          </div>
          <div class="body-box-body-box-item">
            <div class="border">
              <i class="fas fa-clock text-primary text-xl"></i>
            </div>
            <div>
              <p class="border-top">学习时长</p>
              <p class="border-bottom">186 小时</p>
            </div>
          </div>
        </div>
      </div>
      <div class="body-Box">
        <div class="body-Box-box">
          <h3 class="body-box-title">学习趋势</h3>
          <div class="btn-icon">
            <button>周</button>
            <button>月</button>
            <button>年</button>
          </div>
        </div>
        <div id="trendChart" class="w-full h-[300px]"></div>
      </div>
    </div>
  </div>
</template>
<style src="../css/english/plan-study.css"></style>